<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用户详情</title>
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <style type="text/css">
        body{font-size:16px;background-color:#e3e3e3;}
        .none{display:none;}
        .sea-content{position:relative;background-color:#DD2121;padding:10px;z-index:1;}
        .rightArrow{position:absolute;z-index:2;top:19px;right:10px;width:0;height:0;font-size:0;border-style:dashed dashed dashed solid;border-width:12px;border-color:#fff transparent transparent transparent;}
        .rightArrow:after{content:'';border-color:#DD2121 transparent transparent transparent;border-width:10px;border-style:dashed dashed dashed solid;font-size:0;position:absolute;top:-12px;left:-10px;}
        .sea-frame{line-height:30px;background-color:#fff;border-radius:5px;text-align:center;width:90%;}
        #listTab{background-color:#fff;}
        #listTab th{height:40px;background-color:#ECECEC;}
        #listTab th,#listTab td{text-align:center;}
        #listTab td{height:40px;border-bottom:1px #ECECEC solid;}
        .putc{position:relative;z-index:1;width:90%;}
        .searchBtn{width:30px;height:30px;background:url(images/search_07.png) #ECECEC no-repeat center center;
            position:absolute;right:40px;border-radius:0 5px 5px 0;z-index:3;background-size:15px;}
        .sea-term{margin-bottom:10px;display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;-webkit-box-orient:horizontal;}
        .sea-term span{-webkit-box-flex:1;display:block;text-align:center;height:30px;line-height:30px;}
        .selectTerm{border-bottom:2px #DD2121 solid;font-weight:bold;}

        #scrollWapper{overflow-y:scroll;height:400px;-webkit-overflow-scrolling:touch;position:relative;z-index:1;}
        #scroller{width:100%;position:absolute;z-index:3;}
        .pullDown,.pullUp{width:100%;text-align:center;font-size:14px;height:40px;line-height:40px;position:absolute;z-index:2;}
        .pullUp{top:0;}
        .pullDown{top:0;}
    </style>
</head>
<body>
<div id="scrollWapper">
        <div class="pullDown">下拉刷新</div>
        <div id="scroller">
			<section id="userMessage">
				<div class="search">
					<div class="sea-content">
						<div class="putc">
							<input type="text"  class="sea-frame" placeholder="搜索" />
							<i class="searchBtn none"></i>
						</div>

						<span class="rightArrow"></span>
					</div>
					<div class="sea-term" style="display:none;">
						<span class="selectTerm" data-c="0">姓名</span><span data-c="1">电话</span><span data-c="2">日期</span>
					</div>
				</div>
				
						<table width="100%" cellpadding="0" cellspacing="0" id="listTab">
							<thead>
							<tr><th>姓名</th><th>电话</th><th>日期</th></tr>
							</thead>
							<tbody>
							
							</tbody>
						</table>

					

			</section>
			</div>
					<div class="pullUp">上啦加载更多</div>
    </div>
</body>
</html>
<script type="text/javascript" src="js/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/scrollNew.js"></script>
<script>
    function loadedEvents() {
        $('.rightArrow').on('click', function () {
            var term = $('.sea-term');
            term.toggle('slow');
        });

        $('.sea-term span').click(function () {
            var _this = $(this);
            _this.addClass('selectTerm').siblings().removeClass('selectTerm');
        })

        $('.sea-frame').on('focus', function () {
            $('.searchBtn').removeClass('none');
        })

        $('.sea-frame').on('blur', function () {
            $('.searchBtn').addClass('none');
        })
    }

    (function($){
        loadedEvents();
		var oldJson = [{"name":"kevin","tel":"13526262626"},{"name":"张三","tel":"13656585654"},{"name":"李四","tel":"1385658526"}];
		var newJson = [{"name":"王二","tel":"15235265256"},{"name":"麻子","tel":"18565956856"},{"name":"苍老师","tel":"1365956216"}];
		function showData(json){
			var tr='';
			for(var i=0;i<json.length;i++){
				tr += '<tr><td>'+(i+1)+'</td><td>'+json[i].name+'</td><td>'+json[i].tel+'</td></tr>';
			}
			$('#listTab tbody').append(tr);
		}
		showData(oldJson);
        _Scroll.init('scrollWapper',{onBeforUpDownFlat:true,onscrollBar:false,scrollTag:'scroller',touchmoveDownFn:function(me){
            setTimeout(function(){
                me.pullDown.innerText = '下拉刷新';
				$('#listTab tbody').empty();
				showData(oldJson);
                me.options.scrollWarpperTop = 0;
                me.refresh();
            },2000);
        },touchmoveUpFn:function(me){
			setTimeout(function(){
				me.pullDown.innerText = '上拉加载更多';
				showData(newJson);
				me.options.scrollWarpperTop = 0;
				me.refresh();
			},2000);
		}});
        this.showData = function(){
            var datac = $('.selectTerm').attr('data-c');
            var json=[{name:'kevintan',phone:'13526265859',time:'2015-05-12'},{name:'kevintan',phone:'13526265859',time:'2015-05-12'},{name:'kevintan',phone:'13526265859',time:'2015-05-12'},{name:'kevintan',phone:'13526265859',time:'2015-05-12'}];
            var tr = '';
            for(var l in json)
            {
                var item = json[l];
                tr+'<tr><td>'+item.name+'</td><td>'+item.phone+'</td><td>'+ +'</td></tr>';
            }
            /*$.ajax({
             type:'post',
             url:'',
             data:{term:datac},
             dataType:'json',
             success:function(res){

             }
             });*/
        }
    })(jQuery);

</script>